/* eslint-disable no-unused-vars */
import React, { useEffect, useImperativeHandle, useState, forwardRef, useContext } from 'react';
import { Layout, message, Modal, Popconfirm, Table, Space, Tag, Button } from 'antd';
import { useRef } from 'react/cjs/react.development';
import DesignContext from '../designContext';
import EventScriptEdit from './eventScriptEdit';
import DesignUtil from '../common/DesignUtil';

const EventScriptList = forwardRef((props, ref) => {
  const [showlist, setShowList] = useState(false);
  const [edit, setEdit] = useState(null);
  const { eventScripts, setEventScripts } = useContext(DesignContext);
  const refEdit = useRef(null);

  useImperativeHandle(ref, () => ({ setShowList }));

  useEffect(() => {}, []);

  const editPage = function () {
    if (edit) {
      return (
        <Modal
          visible
          mask={false}
          width={700}
          // footer={null}
          title="编辑事件"
          onOk={() => {
            const item = refEdit.current.eventScript2;
            // edit
            const es = eventScripts.map((c) => {
              if (c.createTime === item.createTime) {
                return item;
              }
              return c;
            });
            // add
            const find = eventScripts.find((c) => c.createTime === item.createTime);
            if (!find) {
              es.push(item);
            }
            setEventScripts(es);
            setEdit(null);
          }}
          onCancel={() => {
            setEdit(null);
          }}
        >
          <EventScriptEdit ref={refEdit} eventScript={edit} />
        </Modal>
      );
    } else {
      return <></>;
    }
  };

  const editItem = function (index) {
    if (index <= -1) {
      const newObj = {
        key: `es${DesignUtil.UUID()}`,
        name: '',
        createTime: DesignUtil.formatDate(new Date()),
        editTime: DesignUtil.formatDate(new Date()),
        scripts: [],
      };
      setEdit(newObj);
    } else {
      setEdit({ ...eventScripts[index] });
    }
    // setEventScripts([...eventScripts]);
  };

  const deleteItem = function (index) {
    eventScripts.splice(index, 1);
    setEventScripts([...eventScripts]);
  };

  const columns = [
    {
      title: '场景名',
      dataIndex: 'name',
      key: 'name',
      render: (name) => <p>{name}</p>,
    },
    {
      title: '修改时间',
      dataIndex: 'editTime',
      key: 'editTime',
      render: (editTime) => <p>{DesignUtil.showDate(editTime)}</p>,
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record, index) => (
        <Space size="middle">
          <Button
            type="link"
            onClick={() => {
              editItem(index);
            }}
          >
            修改
          </Button>
          <Button
            type="link"
            onClick={() => {
              deleteItem(index);
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <>
      <Modal
        visible={showlist}
        mask={false}
        width={700}
        footer={
          <Button
            onClick={() => {
              setShowList(false);
            }}
          >
            确定
          </Button>
        }
        onCancel={() => {
          setShowList(false);
        }}
        title="智能助理"
      >
        <Button
          onClick={() => {
            editItem(-1);
          }}
        >
          添加
        </Button>
        <Button
          onClick={() => {
            message.info('待开发');
          }}
        >
          引用
        </Button>
        <Table columns={columns} rowKey="key" dataSource={eventScripts} />
      </Modal>
      {editPage()}
    </>
  );
});

export default EventScriptList;
